<template>
  <el-form ref="form" :rules="rules" :model="currentMenu" label-width="100px" class="demo-form">
    <el-form-item label="菜单名称" prop="menuName">
      <el-input v-model="currentMenu.menuName" ></el-input>
    </el-form-item>

    <el-form-item label="父级菜单ID" prop="parentMenuId">
      <el-input v-model="currentMenu.parentMenuId"></el-input>
    </el-form-item>

    <el-form-item label="图标" prop="icon">
      <el-input v-model="currentMenu.icon"></el-input>
    </el-form-item>

    <el-form-item label="菜单系统" prop="menuSys">
      <el-input v-model="currentMenu.menuSys"></el-input>
    </el-form-item>
    <el-form-item label="排序" prop="sort">
      <el-input v-model="currentMenu.sort"></el-input>
    </el-form-item>
    <el-form-item label="路由" prop="route">
      <el-input v-model="currentMenu.route"></el-input>
    </el-form-item>
    <el-form-item label="权限" prop="permissions">
      <el-tag
        :key="tag"
        v-for="tag in permissions"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)">
        {{tag}}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+权限</el-button>
    </el-form-item>

    <el-form-item label="菜单类型" prop="menuType">
      <el-select v-model="currentMenu.menuType "  placeholder="请选择">
        <el-option
          v-for="item in MenuTypes"
          :key="item.value"
          :label="item.text"
          :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save('form')" v-has="{class:'Permission:addMenu'}">保存</el-button>
      <el-button @click="back">返回</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { mapGetters } from "vuex";
import md5 from "js-md5";
import Status from "@/libs/status";

export default {
  props: {
    isClose: Boolean
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters({
      currentMenu: "currentMenu"
    }),
    permissions() {
      return this.currentMenu.permissions;
    }
  },
  data() {
    return {
      rules: {
        menuName: [
          { required: true, message: "请输入菜单名", trigger: "blur" },
          { min: 1, max: 15, message: "长度在1 到 15 个字符", trigger: "blur" }
        ],
        menuSys: [
          { required: true, message: "请输入菜单系统", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ],
        menuType: [
          { required: true, message: "请输入菜单类型", trigger: "blur" },
          { min: 1, max: 30, message: "长度在 1 到 30个字符", trigger: "blur" }
        ]
      },
      MenuTypes: Status.MenuTypes,
      inputVisible: false,
      inputValue: ""
    };
  },
  methods: {
    handleClose(tag) {
      this.permissions.splice(this.permissions.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.permissions.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    save(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.currentMenu.permissions = this.permissions;
          this.$store.dispatch("addMenu", this.currentMenu).then(ret => {
            this.$notify({
              title: "操作成功",
              type: "success"
            });
            this.back();
          });
        } else {
          return false;
        }
      });
    },
    back() {
      this.$emit("close");
    }
  },
  components: {}
};
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 120px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
